<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>ExtMapTypeControl Documentation: Examples</title>
   <link rel="stylesheet" type="text/css" href="http://code.google.com/apis/maps/documentation/local_extensions.css" /> 
   <link rel="stylesheet" type="text/css" href="http://code.google.com/css/dev_docs.css" />
   <script type="text/javascript" src="http://code.google.com/apis/maps/include/prettify.js"></script>
  </head>
  <body onload="prettyPrint()">
<h1><a name="ExtMapTypeControl_HowTo" id="ExtMapTypeControl_HowTo"></a>ExtMapTypeControl How-to</h1>
<p>
You can add an ExtMapTypeControl to any Google Map with just one line of code.
</p>
<pre class="prettyprint">
  var map = new GMap2(document.getElementById("map"));
  map.addControl(new ExtMapTypeControl());
  map.addControl(new GSmallMapControl());
  map.setCenter(new GLatLng(37.441944, -122.141944), 13);
  map.setMapType(G_SATELLITE_MAP);
</pre>

<p>
<a href="../examples/extmaptypecontrol.html">View example (extmaptypecontrol.html).</a>
</p>

<h2>Custom Map Types</h2>
<p>Custom map types work just like they do with a regular GMapTypeControl.
<pre class="prettyprint">
  var map = new GMap2(document.getElementById("map"));
  map.addControl(new ExtMapTypeControl());
  map.setCenter(new GLatLng(37.441944, -122.141944), 13);
  map.removeMapType(G_NORMAL_MAP);
  var copyright = new GCopyright(1, new GLatLngBounds(new GLatLng(-90, -180), new GLatLng(90, 180)), 0, 'owned by NASA');
  var copyrights = new GCopyrightCollection('The Blue Marble Imagery');
  copyrights.addCopyright(copyright);
  var tilelayer = new GTileLayer(copyrights, 0, 17);
  tilelayer.getTileUrl = function(tile, zoom) { return "blue_marble.jpg"; };
  var CUSTOM_MAP = new GMapType( [tilelayer], new GMercatorProjection(20), "NASA" );
  map.addMapType(CUSTOM_MAP);
  map.setMapType(G_SATELLITE_MAP);
</pre>
<p>
<a href="../examples/custommaptypes.html">View example (custommaptypes.html).</a>
</p>

<h2>Adding the Traffic Button</h2>
<p>If you'd like your users to be able to easily toggle on/off the Traffic layer, you can add a button to the control by specifying showTrafficOn in the <a href="reference.html">ExtMapTypeControlOptions</a>.
You can also add a drop-down legend to that button by specifying showTrafficKey, as the example code below shows:
<pre class="prettyprint">
  var map = new GMap2(document.getElementById("map"));
  map.addControl(new ExtMapTypeControl({showTraffic: true, showTrafficKey: true}));
  map.setCenter(new GLatLng(37.441944, -122.141944), 13);
  map.setMapType(G_SATELLITE_MAP);
</pre>
<p>
<a href="../examples/trafficexample.html">View example (trafficexample.html).</a>
</p>

<script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
</script>
<script type="text/javascript">
_uacct = "UA-964209-4";
urchinTracker();
</script>

</body>
</html>
